﻿@using System.Threading.Tasks
@using Magicodes.Admin.Tenants.Dashboard.Dto
@using Magicodes.Admin.Web.Areas.Admin.Startup
@{
    ViewBag.CurrentPageName = AdminPageNames.Tenant.Dashboard;
}
@section Styles
{
    <link rel="stylesheet" href="~/lib/morris.js/morris.css" asp-append-version="true" />
}

@section Scripts
{
    <environment names="Development">
        <script src="~/view-resources/Areas/Admin/Views/_Bundles/tenant-dashboard-libs.js" asp-append-version="true"></script>
    </environment>

    <environment names="Staging,Production">
        <script src="~/view-resources/Areas/Admin/Views/_Bundles/tenant-dashboard-libs.min.js" asp-append-version="true"></script>
    </environment>
}

<div class="row margin-bottom-5">
    <div class="col-xs-6">
        <div class="page-head">
            <div class="page-title">
                <h1>
                    <span>@L("Dashboard")</span> <small>@L("DashboardHeaderInfo")</small>
                </h1>
            </div>
        </div>
    </div>
</div>

<div class="row margin-top-10">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-green-sharp">
                        <span class="counterup" id="totalProfit">...</span>
                        <small class="font-green-sharp">$</small>
                    </h3>
                    <small>TOTAL PROFIT</small>
                </div>
                <div class="icon">
                    <i class="icon-pie-chart"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 76%;" class="progress-bar progress-bar-success green-sharp">
                        <span class="sr-only">76% progress</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        progress
                    </div>
                    <div class="status-number">
                        <span class="counterup">76</span>%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-red-haze counterup" id="newFeedbacks">...</h3>
                    <small>NEW FEEDBACKS</small>
                </div>
                <div class="icon">
                    <i class="icon-like"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 85%;" class="progress-bar progress-bar-success red-haze">
                        <span class="sr-only">85% change</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        change
                    </div>
                    <div class="status-number">
                        <span class="counterup">85</span>%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-blue-sharp counterup" id="newOrders">...</h3>
                    <small>NEW ORDERS</small>
                </div>
                <div class="icon">
                    <i class="icon-basket"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 45%;" class="progress-bar progress-bar-success blue-sharp">
                        <span class="sr-only">45% grow</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        grow
                    </div>
                    <div class="status-number">
                        <span class="counterup">45</span>%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-purple-soft counterup" id="newUsers">...</h3>
                    <small>NEW USERS</small>
                </div>
                <div class="icon">
                    <i class="icon-user"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 57%;" class="progress-bar progress-bar-success purple-soft">
                        <span class="sr-only">56% change</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        change
                    </div>
                    <div class="status-number">
                        <span class="counterup">57</span>%
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-xs-12 col-sm-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light ">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <i class="icon-bar-chart font-green-haze hide"></i>
                    <span class="caption-subject font-green-haze bold uppercase">Sales Summary</span>
                    <span class="caption-helper hide">weekly stats...</span>
                </div>
                <div class="actions">
                    <div class="btn-group btn-group-devided" data-toggle="buttons">
                        <label class="btn btn-transparent grey-salsa btn-circle btn-sm active">
                            <input type="radio" name="SalesSummaryDateInterval" class="toggle" value="@((int)SalesSummaryDatePeriod.Daily)">Daily
                        </label>
                        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
                            <input type="radio" name="SalesSummaryDateInterval" class="toggle" value="@((int)SalesSummaryDatePeriod.Weekly)">Weekly
                        </label>
                        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
                            <input type="radio" name="SalesSummaryDateInterval" class="toggle" value="@((int)SalesSummaryDatePeriod.Monthly)">Monthly
                        </label>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <div class="row list-separated">
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Total Sales
                        </div>
                        <div class="uppercase font-hg font-red-flamingo">
                            <span id="totalSales" class="counterup">...</span> <span class="font-lg font-red-flamingo">$</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Revenue
                        </div>
                        <div class="uppercase font-hg font-green-haze">
                            <span id="revenue" class="counterup">...</span> <span class="font-lg font-green-haze">$</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Expenses
                        </div>
                        <div class="uppercase font-hg font-purple">
                            <span id="expenses" class="counterup">...</span> <span class="font-lg font-purple">$</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Growth
                        </div>
                        <div class="uppercase font-hg font-blue-sharp">
                            <span id="growth" class="counterup">...</span> <span class="font-lg font-blue-sharp">$</span>
                        </div>
                    </div>
                </div>

                <div id="salesStatisticsLoading" style="text-align: center; height: 240px;">
                    <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                </div>

                <div id="salesStatistics" class="portlet-body-morris-fit morris-chart" style="height: 260px; display: none">
                </div>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>

    <div class="col-lg-6 col-xs-12 col-sm-12">
        <!-- BEGIN REGIONAL STATS PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-share font-dark hide"></i>
                    <span class="caption-subject  font-green-haze bold uppercase">Regional Stats</span>
                </div>
            </div>
            <div class="portlet-body">
                <div id="region_statistics_content">
                    <div id="worldmap" style="height: 320px"> </div>
                </div>
            </div>
        </div>
        <!-- END REGIONAL STATS PORTLET-->
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-xs-12 col-sm-12">
        <div class="portlet light bordered" style="min-height:212px">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-cursor font-dark hide"></i>
                    <span class="caption-subject  font-green-haze bold uppercase">General Stats</span>
                </div>
                <div class="actions">
                    <a href="javascript:;" class="btn btn-sm btn-circle red" id="generalStatsReload">
                        <i class="fa fa-repeat"></i> Reload
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="easy-pie-chart-loading" style="text-align: center;">
                            <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                        </div>
                        <div class="easy-pie-chart">
                            <div class="number transactions" id="transactionPercent" data-percent="0">
                                +<span id="transactionPercent">...</span>%
                            </div>
                            <a class="title" href="javascript:;">
                                Transactions
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="margin-bottom-10 visible-sm"> </div>
                    <div class="col-md-4">
                        <div class="easy-pie-chart-loading" style="text-align: center;">
                            <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                        </div>
                        <div class="easy-pie-chart">
                            <div class="number visits" id="newVisitPercent" data-percent="0">
                                +<span>...</span>%
                            </div>
                            <a class="title" href="javascript:;">
                                New Visits
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="margin-bottom-10 visible-sm"> </div>
                    <div class="col-md-4">
                        <div class="easy-pie-chart-loading" style="text-align: center;">
                            <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                        </div>
                        <div class="easy-pie-chart">
                            <div class="number bounce" id="bouncePercent" data-percent="0">
                                -<span>...</span>%
                            </div>
                            <a class="title" href="javascript:;">
                                Bounce
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-xs-12 col-sm-12">
        <div class="portlet light bordered" style="min-height:212px">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-dark hide"></i>
                    <span class="caption-subject font-green-haze bold uppercase">Server Stats</span>
                    <span class="caption-helper">monthly stats...</span>
                </div>
                <div class="tools">
                    <a href="" class="collapse"> </a>
                    <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                    <a href="" class="reload" id="serverStatsReload"> </a>
                    <a href="" class="remove"> </a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="sparkline-chart-loading" style="text-align: center; margin-bottom: 80px;">
                            <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                        </div>
                        <div class="sparkline-chart">
                            <div class="number" id="network"></div>
                            <a class="title" href="javascript:;">
                                Network
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="margin-bottom-10 visible-sm"> </div>
                    <div class="col-md-4">
                        <div class="sparkline-chart-loading" style="text-align: center; margin-bottom: 80px;">
                            <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                        </div>
                        <div class="sparkline-chart">
                            <div class="number" id="cpu-load"></div>
                            <a class="title" href="javascript:;">
                                CPU Load
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="margin-bottom-10 visible-sm"> </div>
                    <div class="col-md-4">
                        <div class="sparkline-chart-loading" style="text-align: center; margin-bottom: 80px;">
                            <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                        </div>
                        <div class="sparkline-chart">
                            <div class="number" id="load-rate"></div>
                            <a class="title" href="javascript:;">
                                Load Rate
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-xs-12 col-sm-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light portlet-fit bordered" style="height: 360px">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-directions font-green hide"></i>
                    <span class="caption-subject bold font-green-haze uppercase"> Activities</span>
                    <span class="caption-helper">Horizontal Timeline</span>
                </div>
                <div class="actions">
                    <div class="btn-group">
                        <a class="btn blue btn-outline btn-circle btn-sm" href="javascript:;" data-toggle="dropdown" data-close-others="true">
                            Actions
                            <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="javascript:;"> Action 1</a>
                            </li>
                            <li class="divider"> </li>
                            <li>
                                <a href="javascript:;">Action 2</a>
                            </li>
                            <li>
                                <a href="javascript:;">Action 3</a>
                            </li>
                            <li>
                                <a href="javascript:;">Action 4</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <div id="horizontalTimelineLoading" style="text-align: center">
                    <img src="/metronic/assets/global/img/loading.gif" alt="loading" />
                </div>

                <div id="horizontalTimelineContainer" data-spacing="60" style="display:none">
                    <div class="timeline">
                        <div class="events-wrapper">
                            <div class="events">
                                <ol id="timelineDateList"></ol>
                                <span class="filling-line bg-red" aria-hidden="true"></span>
                            </div>
                        </div>
                        <ul class="cd-timeline-navigation mt-ht-nav-icon">
                            <li>
                                <a href="#0" class="prev inactive btn btn-outline red md-skip">
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#0" class="next btn btn-outline red md-skip">
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="events-content">
                        <ol id="timelineDetails"></ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>
    <div class="col-lg-6 col-xs-12 col-sm-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light " style="height: 360px">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <i class="icon-bar-chart font-green-haze hide"></i>
                    <span class="caption-subject font-green-haze bold uppercase">Member Activity</span>
                    <span class="caption-helper hide">weekly stats...</span>
                </div>
                <div class="actions">
                    <button id="refreshMemberActivityButton" class="btn btn-success btn-rounded"><i class="fa fa-refresh"></i> Refresh</button>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-scrollable table-scrollable-borderless">
                    <table class="table table-hover table-light" id="memberActivityTable">
                        <thead>
                            <tr class="uppercase">
                                <th colspan="2">
                                    MEMBER
                                </th>
                                <th>
                                    Earnings
                                </th>
                                <th>
                                    CASES
                                </th>
                                <th>
                                    CLOSED
                                </th>
                                <th>
                                    RATE
                                </th>
                            </tr>
                        </thead>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar4.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar5.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar6.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar7.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>
</div>

